<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生活盲盒 · 惊喜之旅</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: '#F5F7FA',
            dark: '#333647',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-float-delay-1 {
        animation: float 6s ease-in-out 1s infinite;
      }
      .animate-float-delay-2 {
        animation: float 6s ease-in-out 2s infinite;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .animate-scale {
        animation: scale 0.3s ease-in-out;
      }
      .animate-sparkle {
        animation: sparkle 0.8s ease-out forwards;
      }
      .animate-spin-slow {
        animation: spin 8s linear infinite;
      }
    }

    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }
    
    @keyframes scale {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }
    
    @keyframes sparkle {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.2);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .hero-gradient {
      background: linear-gradient(135deg, rgba(22, 93, 255, 0.8) 0%, rgba(22, 93, 255, 0.4) 100%);
    }

    .card-hover {
      transition: all 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #165DFF;
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .blind-box {
      position: relative;
      width: 220px;
      height: 220px;
      perspective: 1000px;
      transform-style: preserve-3d;
      cursor: pointer;
      transition: transform 0.5s ease;
    }

    .blind-box-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .blind-box-front, .blind-box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: white;
      box-shadow: 0 0 20px rgba(22, 93, 255, 0.5);
      transition: all 0.3s ease;
    }

    .blind-box-front {
      background: linear-gradient(135deg, #165DFF 0%, #0A3CA0 100%);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .blind-box-back {
      background: linear-gradient(135deg, #FF7D00 0%, #D46800 100%);
      transform: rotateY(180deg);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .blind-box:hover .blind-box-inner {
      transform: rotateY(15deg);
    }
    
    .blind-box:active .blind-box-inner {
      transform: rotateY(180deg) scale(0.95);
    }

    .blind-box.open .blind-box-inner {
      transform: rotateY(180deg);
    }

    .result {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
      z-index: 100;
      opacity: 0;
      max-width: 400px;
      width: 90%;
      text-align: center;
      transform-origin: center;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate(-50%, -40%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }
    
    @keyframes bounceIn {
      0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    .animate-fadeInUp {
      animation: fadeInUp 0.5s ease forwards;
    }
    
    .animate-bounceIn {
      animation: bounceIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99;
      opacity: 0;
    }

    .reward-card {
      transition: all 0.3s ease;
      transform-style: preserve-3d;
    }

    .reward-card:hover {
      transform: translateY(-5px) rotateY(5deg);
    }
    
    .sparkle {
      position: absolute;
      background-image: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 100;
    }
    
    .music-player {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background-color: white;
      border-radius: 50px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      padding: 8px 16px;
      display: flex;
      align-items: center;
      z-index: 100;
      transition: all 0.3s ease;
    }
    
    .music-player:hover {
      box-shadow: 0 10px 25px rgba(22, 93, 255, 0.2);
    }
    
    .music-player.minimized {
      padding: 8px;
    }
    
    .music-toggle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #165DFF;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 12px;
      transition: all 0.3s ease;
    }
    
    .music-toggle:hover {
      background-color: #0A3CA0;
      transform: scale(1.05);
    }
    
    .music-controls {
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
    }
    
    .music-player.minimized .music-controls {
      width: 0;
      overflow: hidden;
      opacity: 0;
    }
    
    .music-title {
      font-size: 14px;
      margin-right: 12px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .volume-slider {
      width: 80px;
      height: 4px;
      background-color: #e0e0e0;
      border-radius: 2px;
      margin: 0 8px;
      position: relative;
      cursor: pointer;
    }
    
    .volume-thumb {
      position: absolute;
      top: -4px;
      left: 70%;
      width: 12px;
      height: 12px;
      background-color: #165DFF;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.1s ease;
    }
    
    .volume-thumb:hover {
      transform: scale(1.2);
    }
    
    .music-next {
      color: #165DFF;
      cursor: pointer;
      margin-left: 8px;
      transition: all 0.3s ease;
    }
    
    .music-next:hover {
      transform: scale(1.1);
    }
    
    .share-popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      z-index: 101;
    }
    
    .particle-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    
    .loading-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      z-index: 99;
      justify-content: center;
      align-items: center;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #165DFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @media (max-width: 640px) {
      .music-player {
        bottom: 20px;
        right: 20px;
      }
      
      .music-title {
        display: none;
      }
      
      .volume-slider {
        width: 50px;
      }
      
      .blind-box {
        width: 180px;
        height: 180px;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral text-dark min-h-screen overflow-x-hidden">
  <!-- 粒子背景 -->
  <div class="particle-bg" id="particle-bg"></div>

  <!-- 页面容器 -->
  <div id="app" class="min-h-screen flex flex-col relative z-10">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md z-50 transition-all duration-300 shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="#home" class="text-2xl font-bold text-primary flex items-center">
          <i class="fa-solid fa-gift mr-2"></i>
          <span>生活盲盒</span>
        </a>

        <div class="hidden md:flex space-x-8">
          <a href="#home" class="nav-link font-medium">首页</a>
          <a href="#blind-box" class="nav-link font-medium">开启盲盒</a>
          <a href="#stories" class="nav-link font-medium">盲盒故事</a>
        </div>

        <div class="md:hidden">
          <button id="menu-toggle" class="text-dark focus:outline-none">
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#home" class="py-2 font-medium">首页</a>
          <a href="#blind-box" class="py-2 font-medium">开启盲盒</a>
          <a href="#stories" class="py-2 font-medium">盲盒故事</a>
        </div>
      </div>
    </nav>

    <!-- 背景音乐 -->
    <div class="music-player minimized" id="music-player">
      <div class="music-toggle" id="music-toggle">
        <i class="fa-solid fa-music"></i>
      </div>
      <div class="music-controls">
        <div class="music-title" id="music-title">神秘之旅</div>
        <div class="volume-slider" id="volume-slider">
          <div class="volume-thumb" id="volume-thumb"></div>
        </div>
        <div class="music-next" id="music-next">
          <i class="fa-solid fa-forward"></i>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <main class="flex-grow pt-16">
      <!-- 博客详情页面头部 -->
      <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-6 leading-tight">
              生活盲盒 · 惊喜之旅
            </h1>
            <p class="text-gray-600 max-w-2xl mx-auto mb-8">
              每一次开启，都是一次未知的惊喜
            </p>
            <div class="relative overflow-hidden rounded-lg mb-8">
              <img src="https://picsum.photos/id/1048/1200/600" alt="盲盒封面图" class="w-full h-auto object-cover">
            </div>
          </div>
        </div>
      </section>

      <!-- 盲盒玩法区域 -->
      <section class="py-16 bg-gradient-to-b from-white to-neutral">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">如何玩转生活盲盒</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">简单三步，开启你的惊喜之旅</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
              <div class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <i class="fa-solid fa-hand-pointer text-primary text-2xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-2">点击盲盒</h3>
                <p class="text-gray-600">轻轻点击屏幕上的盲盒，准备迎接惊喜</p>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <i class="fa-solid fa-box-open text-primary text-2xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-2">开启惊喜</h3>
                <p class="text-gray-600">见证盲盒开启的精彩瞬间，感受期待与兴奋</p>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <i class="fa-solid fa-gift text-primary text-2xl"></i>
                </div>
                <h3 class="font-bold text-lg mb-2">获得奖励</h3>
                <p class="text-gray-600">看看你获得了什么惊喜奖励，开始新的体验</p>
              </div>
            </div>
            
            <!-- 每日签到 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-12">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-calendar-check text-primary mr-2"></i>
                每日签到
              </h3>
              <div class="flex flex-wrap gap-2 mb-4">
                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">1</div>
                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">2</div>
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">3</div>
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">4</div>
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">5</div>
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">6</div>
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">7</div>
              </div>
              <button id="sign-in" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02]">
                今日未签到 <span class="text-sm">(连续签到：<span id="sign-days">0</span>天)</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 盲盒主区域 -->
      <section id="blind-box" class="py-20 bg-neutral relative overflow-hidden">
        <div class="container mx-auto px-4 relative z-10">
          <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-2xl md:text-3xl font-bold text-dark mb-8">
              准备好开启你的<span class="text-primary">专属惊喜</span>了吗？
            </h2>
            
            <!-- 盲盒 -->
            <div class="py-8">
              <div class="blind-box mx-auto" id="blind-box-element">
                <div class="blind-box-inner">
                  <div class="blind-box-front">
                    <span>点击开启</span>
                  </div>
                  <div class="blind-box-back">
                    <i class="fa-solid fa-gift text-5xl"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <p class="text-gray-600 mb-8">每天可以开启3次盲盒，试试看你的运气如何！</p>
            
            <!-- 剩余次数 -->
            <div class="inline-flex bg-white/80 backdrop-blur-sm rounded-full px-6 py-3 shadow-md mb-12">
              <i class="fa-solid fa-clock-o text-primary mr-2"></i>
              <span class="font-medium">今日剩余开启次数：<span class="text-primary font-bold" id="remaining-times">3</span></span>
            </div>
            
            <!-- 排行榜 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-12">
              <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="fa-solid fa-trophy text-secondary mr-2"></i>
                盲盒达人榜
              </h3>
              <ul class="space-y-3">
                <li class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 rounded-full bg-secondary/20 flex items-center justify-center text-secondary font-bold">1</div>
                    <img src="https://picsum.photos/id/237/32/32" alt="用户头像" class="w-8 h-8 rounded-full">
                    <span>小明</span>
                  </div>
                  <span class="text-sm text-gray-500">稀有奖励：3次</span>
                </li>
                <li class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">2</div>
                    <img src="https://picsum.photos/id/1027/32/32" alt="用户头像" class="w-8 h-8 rounded-full">
                    <span>小红</span>
                  </div>
                  <span class="text-sm text-gray-500">稀有奖励：2次</span>
                </li>
                <li class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">3</div>
                    <img src="https://picsum.photos/id/1005/32/32" alt="用户头像" class="w-8 h-8 rounded-full">
                    <span>小华</span>
                  </div>
                  <span class="text-sm text-gray-500">稀有奖励：1次</span>
                </li>
              </ul>
            </div>
            
            <!-- 历史奖励 -->
            <div class="mb-12">
              <h3 class="text-xl font-bold text-dark mb-6">你的历史奖励</h3>
              <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-w-2xl mx-auto" id="history-rewards">
                <!-- 历史奖励会动态添加到这里 -->
                <div class="bg-white rounded-lg shadow-sm p-4 text-center reward-card">
                  <div class="text-primary text-3xl mb-2">
                    <i class="fa-solid fa-ticket"></i>
                  </div>
                  <p class="text-sm">美食优惠券</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4 text-center reward-card">
                  <div class="text-primary text-3xl mb-2">
                    <i class="fa-solid fa-film"></i>
                  </div>
                  <p class="text-sm">电影票</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-4 text-center reward-card">
                  <div class="text-primary text-3xl mb-2">
                    <i class="fa-solid fa-gift"></i>
                  </div>
                  <p class="text-sm">精美礼品</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 背景装饰 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
          <div class="absolute top-20 left-[10%] w-40 h-40 bg-primary/5 rounded-full animate-float"></div>
          <div class="absolute top-40 right-[15%] w-60 h-60 bg-secondary/5 rounded-full animate-float-delay-1"></div>
          <div class="absolute bottom-20 left-[20%] w-50 h-50 bg-primary/5 rounded-full animate-float-delay-2"></div>
        </div>
      </section>

      <!-- 盲盒故事专栏 -->
      <section id="stories" class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">盲盒故事</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">听听大家的惊喜经历</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
              <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:border-primary/30 transition-colors">
                <div class="flex items-center space-x-4 mb-4">
                  <img src="https://picsum.photos/id/1025/48/48" alt="用户头像" class="w-12 h-12 rounded-full">
                  <div>
                    <h4 class="font-bold">小李</h4>
                    <p class="text-sm text-gray-500">2023年12月15日</p>
                  </div>
                </div>
                <h3 class="text-lg font-bold mb-2">抽到双人旅行的幸运儿</h3>
                <p class="text-gray-700">没想到第一次抽就中了稀有奖励，和女朋友一起去了大理，留下了美好的回忆。感谢生活盲盒带来的惊喜！</p>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:border-primary/30 transition-colors">
                <div class="flex items-center space-x-4 mb-4">
                  <img src="https://picsum.photos/id/1012/48/48" alt="用户头像" class="w-12 h-12 rounded-full">
                  <div>
                    <h4 class="font-bold">小张</h4>
                    <p class="text-sm text-gray-500">2023年12月10日</p>
                  </div>
                </div>
                <h3 class="text-lg font-bold mb-2">烹饪课程改变了我的生活</h3>
                <p class="text-gray-700">抽到的烹饪课程让我爱上了做菜，现在每周都会为家人做一顿大餐，增进了家庭感情。小小的盲盒，大大的惊喜！</p>
              </div>
            </div>
            
            <div class="text-center">
              <button class="bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
                查看更多故事
              </button>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 壁纸下载 -->
      <section class="py-16 bg-neutral">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">主题壁纸</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">下载精美壁纸，让每一天都充满惊喜</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <img src="https://picsum.photos/id/1048/400/300" alt="壁纸" class="w-full h-48 object-cover">
                <div class="p-4 flex justify-between items-center">
                  <span class="font-medium">盲盒惊喜</span>
                  <button class="text-primary hover:text-primary/80">
                    <i class="fa-solid fa-download"></i>
                  </button>
                </div>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <img src="https://picsum.photos/id/1059/400/300" alt="壁纸" class="w-full h-48 object-cover">
                <div class="p-4 flex justify-between items-center">
                  <span class="font-medium">神秘之旅</span>
                  <button class="text-primary hover:text-primary/80">
                    <i class="fa-solid fa-download"></i>
                  </button>
                </div>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <img src="https://picsum.photos/id/1067/400/300" alt="壁纸" class="w-full h-48 object-cover">
                <div class="p-4 flex justify-between items-center">
                  <span class="font-medium">幸运时刻</span>
                  <button class="text-primary hover:text-primary/80">
                    <i class="fa-solid fa-download"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 结果弹窗 -->
    <div class="result" id="result">
      <div class="flex justify-end mb-2">
        <button id="close-result" class="text-gray-400 hover:text-gray-600">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      <div class="result-icon mb-4 text-5xl text-primary">
        <i class="fa-solid fa-gift"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-2">恭喜你！</h3>
      <p class="text-dark/70 mb-6" id="result-text"></p>
      <button class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg w-full" id="close-result-btn">
        继续探索
      </button>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-popup" id="share-popup">
      <div class="flex justify-end mb-2">
        <button id="close-share" class="text-gray-400 hover:text-gray-600">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      <h3 class="text-lg font-bold mb-4">分享你的好运！</h3>
      <div class="flex space-x-4">
        <a href="#" class="w-10 h-10 rounded-full bg-[#07C160] flex items-center justify-center text-white hover:bg-[#06b058]">
          <i class="fa-brands fa-wechat"></i>
        </a>
        <a href="#" class="w-10 h-10 rounded-full bg-[#E6162D] flex items-center justify-center text-white hover:bg-[#d11428]">
          <i class="fa-brands fa-weibo"></i>
        </a>
        <a href="#" class="w-10 h-10 rounded-full bg-[#0078D7] flex items-center justify-center text-white hover:bg-[#0067b8]">
          <i class="fa-brands fa-linkedin"></i>
        </a>
        <a href="#" class="w-10 h-10 rounded-full bg-[#1DA1F2] flex items-center justify-center text-white hover:bg-[#0d95e8]">
          <i class="fa-brands fa-twitter"></i>
        </a>
      </div>
    </div>
    
    <!-- 加载动画 -->
    <div class="loading-overlay" id="loading-overlay">
      <div class="spinner"></div>
    </div>

    <!-- 音频元素 -->
    <audio id="bg-music" loop>
      <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
      您的浏览器不支持音频播放。
    </audio>
    <audio id="open-sound">
      <source src="https://assets.mixkit.co/sfx/preview/mixkit-opening-present-1698.mp3" type="audio/mpeg">
      您的浏览器不支持音频播放。
    </audio>
  </div>

  <script>
    // 初始化粒子背景
    function initParticleBackground() {
      const particleBg = document.getElementById('particle-bg');
      const particleCount = 100;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // 随机位置
        const left = Math.random() * 100;
        const top = Math.random() * 100;
        
        // 随机大小和颜色
        const size = Math.random() * 3 + 1;
        const opacity = Math.random() * 0.3 + 0.1;
        const colors = ['rgba(22, 93, 255,', 'rgba(255, 125, 0,'];
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        // 随机动画延迟和持续时间
        const delay = Math.random() * 10;
        const duration = Math.random() * 20 + 10;
        
        particle.style.cssText = `
          left: ${left}%;
          top: ${top}%;
          width: ${size}px;
          height: ${size}px;
          background: ${color} ${opacity});
          animation: float ${duration}s ease-in-out ${delay}s infinite;
        `;
        
        particleBg.appendChild(particle);
      }
    }
    
    // 3D盲盒效果
    const blindBox = document.getElementById('blind-box-element');
    const result = document.getElementById('result');
    const resultText = document.getElementById('result-text');
    const closeResult = document.getElementById('close-result');
    const closeResultBtn = document.getElementById('close-result-btn');
    const remainingTimes = document.getElementById('remaining-times');
    const historyRewards = document.getElementById('history-rewards');
    const sharePopup = document.getElementById('share-popup');
    const closeShare = document.getElementById('close-share');
    const loadingOverlay = document.getElementById('loading-overlay');
    const signInBtn = document.getElementById('sign-in');
    const signDays = document.getElementById('sign-days');
    
    // 音乐相关元素
    const musicPlayer = document.getElementById('music-player');
    const musicToggle = document.getElementById('music-toggle');
    const musicTitle = document.getElementById('music-title');
    const volumeSlider = document.getElementById('volume-slider');
    const volumeThumb = document.getElementById('volume-thumb');
    const musicNext = document.getElementById('music-next');
    const bgMusic = document.getElementById('bg-music');
    const openSound = document.getElementById('open-sound');
    
    let times = 3; // 初始次数
    let isAnimating = false; // 动画状态标志
    let musicInitialized = false; // 音乐是否已初始化
    let musicIndex = 0; // 当前音乐索引
    let musicEnabled = true; // 音乐是否启用
    let signInCount = 0; // 签到次数
    
    // 检查本地存储中的签到状态
    const savedSignInCount = localStorage.getItem('signInCount');
    if (savedSignInCount) {
      signInCount = parseInt(savedSignInCount);
      signDays.textContent = signInCount;
    }
    
    // 音乐列表
    const musicList = [
      { title: "神秘之旅", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" },
      { title: "惊喜探索", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" },
      { title: "幸运时刻", src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" }
    ];
    
    // 奖励配置
    const rewards = [
      { text: "获得一张美食优惠券！", icon: "fa-utensils" },
      { text: "获得一次免费电影观影机会！", icon: "fa-film" },
      { text: "获得一份精美礼品！", icon: "fa-gift" },
      { text: "获得一次免费按摩体验！", icon: "fa-hand-sparkles" },
      { text: "获得一张旅游优惠券！", icon: "fa-plane" },
      { text: "获得一本畅销书！", icon: "fa-book" },
      { text: "获得一次摄影体验！", icon: "fa-camera" },
      { text: "获得一次烹饪课程！", icon: "fa-graduation-cap" },
      { text: "获得一次SPA体验！", icon: "fa-spa" },
      { text: "获得一次健身课程！", icon: "fa-dumbbell" }
    ];
    
    // 稀有奖励
    const rareRewards = [
      { text: "恭喜你获得了稀有奖励：双人豪华旅行！", icon: "fa-globe" },
      { text: "恭喜你获得了稀有奖励：高端餐厅双人晚餐！", icon: "fa-concierge-bell" },
      { text: "恭喜你获得了稀有奖励：音乐会VIP门票！", icon: "fa-music" },
      { text: "恭喜你获得了稀有奖励：专业摄影器材！", icon: "fa-video-camera" },
      { text: "恭喜你获得了稀有奖励：豪华酒店住宿一晚！", icon: "fa-hotel" }
    ];

    blindBox.addEventListener('click', async () => {
      if (times <= 0 || isAnimating) {
        if (times <= 0) alert('今日次数已用完，明天再来吧！');
        return;
      }
      
      // 显示加载动画
      loadingOverlay.style.display = 'flex';
      
      // 播放盲盒开启音效
      playOpenSound();
      
      isAnimating = true;
      
      // 添加开启动画
      blindBox.classList.add('open');
      blindBox.style.transform = 'scale(1.05)';
      
      // 首次点击时尝试初始化音乐
      if (!musicInitialized) {
        try {
          await initMusic();
          musicInitialized = true;
        } catch (e) {
          console.log("音乐初始化失败，但盲盒功能将继续:", e);
        }
      }
      
      // 模拟抽奖过程
      setTimeout(() => {
        // 隐藏加载动画
        loadingOverlay.style.display = 'none';
        
        // 80%概率普通奖励，20%概率稀有奖励
        const isRare = Math.random() < 0.2;
        let randomReward;
        
        if (isRare) {
          const randomIndex = Math.floor(Math.random() * rareRewards.length);
          randomReward = rareRewards[randomIndex];
          document.querySelector('.result-icon i').className = `fa-solid ${randomReward.icon} text-secondary`;
          createSparkles(blindBox); // 稀有奖励额外特效
          
          // 显示分享弹窗
          setTimeout(() => {
            sharePopup.style.display = 'block';
          }, 1000);
        } else {
          const randomIndex = Math.floor(Math.random() * rewards.length);
          randomReward = rewards[randomIndex];
          document.querySelector('.result-icon i').className = `fa-solid ${randomReward.icon} text-primary`;
        }
        
        // 创建粒子效果
        createParticles(blindBox, isRare);
        
        // 隐藏盲盒，显示结果
        setTimeout(() => {
          blindBox.classList.remove('open');
          blindBox.style.transform = 'scale(1)';
          
          // 使用更生动的弹窗动画
          result.style.display = 'block';
          result.classList.remove('animate-fadeInUp');
          void result.offsetWidth; // 触发重绘
          result.classList.add('animate-bounceIn');
          
          // 更新结果文本
          resultText.textContent = randomReward.text;
          
          // 更新剩余次数
          times--;
          remainingTimes.textContent = times;
          
          // 添加到历史记录
          addToHistory(randomReward);
          
          isAnimating = false;
        }, 800);
      }, 1500);
    });

    // 关闭结果弹窗
    function closeResultModal() {
      result.classList.remove('animate-bounceIn');
      result.classList.add('animate-fadeInUp');
      
      setTimeout(() => {
        result.style.display = 'none';
      }, 500);
    }
    
    closeResult.addEventListener('click', closeResultModal);
    closeResultBtn.addEventListener('click', closeResultModal);
    
    // 关闭分享弹窗
    closeShare.addEventListener('click', () => {
      sharePopup.style.display = 'none';
    });

    // 创建粒子效果函数
    function createParticles(element, isRare = false) {
      const particleCount = isRare ? 120 : 80;
      const boxRect = element.getBoundingClientRect();
      
      // 稀有奖励使用更丰富的颜色
      const colors = isRare 
        ? ['#FF7D00', '#FFB766', '#FFD700', '#FFA500', '#FF4500', '#FF8C00'] 
        : ['#165DFF', '#4A85FF', '#73A6FF', '#99BFFF', '#B8D4FF', '#D6E6FF'];
      
      const particles = [];
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // 随机大小
        const size = Math.random() * 10 + 5;
        
        // 随机颜色
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        // 初始位置
        const x = boxRect.left + boxRect.width / 2;
        const y = boxRect.top + boxRect.height / 2;
        
        // 随机速度和方向
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 8 + 2;
        const vx = Math.cos(angle) * speed;
        const vy = Math.sin(angle) * speed;
        
        // 随机生命周期
        const life = Math.random() * 0.8 + 0.5;
        
        particle.style.cssText = `
          left: ${x}px;
          top: ${y}px;
          width: ${size}px;
          height: ${size}px;
          background-color: ${color};
          opacity: 0;
          z-index: 99;
        `;
        
        document.body.appendChild(particle);
        
        particles.push({
          element: particle,
          x,
          y,
          vx,
          vy,
          life,
          maxLife: life
        });
      }
      
      // 动画循环
      let animationFrame;
      
      function animateParticles(timestamp) {
        let allDead = true;
        
        particles.forEach(particle => {
          if (particle.life <= 0) return;
          
          allDead = false;
          
          // 更新位置
          particle.x += particle.vx;
          particle.y += particle.vy;
          
          // 应用重力
          particle.vy += 0.1;
          
          // 更新不透明度
          particle.life -= 0.01;
          const opacity = particle.life / particle.maxLife;
          
          // 更新DOM
          particle.element.style.left = `${particle.x}px`;
          particle.element.style.top = `${particle.y}px`;
          particle.element.style.opacity = opacity;
        });
        
        if (!allDead) {
          animationFrame = requestAnimationFrame(animateParticles);
        } else {
          // 所有粒子都消失后清理
          particles.forEach(p => p.element.remove());
        }
      }
      
      // 启动动画
      animateParticles();
      
      // 返回清理函数
      return () => {
        cancelAnimationFrame(animationFrame);
        particles.forEach(p => p.element.remove());
      };
    }
    
    // 创建闪光效果
    function createSparkles(element) {
      const boxRect = element.getBoundingClientRect();
      const centerX = boxRect.left + boxRect.width / 2;
      const centerY = boxRect.top + boxRect.height / 2;
      
      // 创建8个闪光
      for (let i = 0; i < 8; i++) {
        const sparkle = document.createElement('div');
        sparkle.className = 'sparkle';
        
        // 随机大小
        const size = Math.random() * 20 + 10;
        
        // 随机位置（围绕中心）
        const angle = (i / 8) * Math.PI * 2;
        const distance = boxRect.width / 2 + Math.random() * 20;
        const x = centerX + Math.cos(angle) * distance;
        const y = centerY + Math.sin(angle) * distance;
        
        sparkle.style.cssText = `
          left: ${x}px;
          top: ${y}px;
          width: ${size}px;
          height: ${size}px;
          z-index: 100;
          opacity: 0;
        `;
        
        document.body.appendChild(sparkle);
        
        // 添加动画
        setTimeout(() => {
          sparkle.style.animation = 'sparkle 0.8s ease-out forwards';
          
          // 动画结束后移除
          setTimeout(() => {
            sparkle.remove();
          }, 800);
        }, i * 100);
      }
    }
    
    // 添加到历史记录
    function addToHistory(reward) {
      const rewardCard = document.createElement('div');
      rewardCard.className = 'bg-white rounded-lg shadow-sm p-4 text-center reward-card animate-scale';
      
      // 设置卡片内容
      rewardCard.innerHTML = `
        <div class="text-${reward === rareRewards ? 'secondary' : 'primary'} text-3xl mb-2">
          <i class="fa-solid ${reward.icon}"></i>
        </div>
        <p class="text-sm">${reward.text.replace('！', '').replace('恭喜你获得了', '')}</p>
      `;
      
      // 添加到历史记录
      historyRewards.insertBefore(rewardCard, historyRewards.firstChild);
      
      // 限制最多显示9个奖励
      if (historyRewards.children.length > 9) {
        historyRewards.removeChild(historyRewards.lastChild);
      }
    }
    
    // 初始化音乐
    async function initMusic() {
      try {
        bgMusic.src = musicList[musicIndex].src;
        musicTitle.textContent = musicList[musicIndex].title;
        
        // 尝试播放音乐
        await bgMusic.play();
        
        // 更新UI
        musicPlayer.classList.remove('minimized');
        musicToggle.innerHTML = '<i class="fa-solid fa-pause"></i>';
      } catch (e) {
        console.error("音乐自动播放失败:", e);
        // 音乐初始化失败，但不影响其他功能
      }
    }
    
    // 播放盲盒开启音效
    function playOpenSound() {
      if (!musicEnabled) return;
      
      // 重置音效
      openSound.currentTime = 0;
      
      // 尝试播放音效
      openSound.play().catch(e => {
        console.log("音效播放失败:", e);
      });
    }
    
    // 音乐控制
    musicToggle.addEventListener('click', () => {
      if (bgMusic.paused) {
        bgMusic.play();
        musicToggle.innerHTML = '<i class="fa-solid fa-pause"></i>';
      } else {
        bgMusic.pause();
        musicToggle.innerHTML = '<i class="fa-solid fa-play"></i>';
      }
    });
    
    // 切换音乐
    musicNext.addEventListener('click', () => {
      musicIndex = (musicIndex + 1) % musicList.length;
      bgMusic.src = musicList[musicIndex].src;
      musicTitle.textContent = musicList[musicIndex].title;
      bgMusic.play();
    });
    
    // 音量控制
    volumeSlider.addEventListener('click', (e) => {
      const rect = volumeSlider.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const percentage = Math.min(Math.max(x / rect.width, 0), 1);
      
      // 更新UI
      volumeThumb.style.left = `${percentage * 100}%`;
      
      // 更新音量
      bgMusic.volume = percentage;
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
    
    // 签到功能
    signInBtn.addEventListener('click', () => {
      // 检查今天是否已经签到
      const lastSignDate = localStorage.getItem('lastSignDate');
      const today = new Date().toDateString();
      
      if (lastSignDate === today) {
        alert('今天已经签到过了，明天再来吧！');
        return;
      }
      
      // 更新签到状态
      signInCount++;
      signDays.textContent = signInCount;
      
      // 保存到本地存储
      localStorage.setItem('signInCount', signInCount);
      localStorage.setItem('lastSignDate', today);
      
      // 更新UI
      signInBtn.textContent = `今日已签到！(连续签到：${signInCount}天)`;
      signInBtn.classList.add('bg-gray-300');
      signInBtn.classList.remove('bg-primary', 'hover:bg-primary/90');
      
      // 增加盲盒次数
      times += 1;
      remainingTimes.textContent = times;
      
      // 显示奖励提示
      alert(`签到成功！获得1次盲盒抽取机会，当前剩余${times}次。`);
    });
    
    // 初始化粒子背景
    initParticleBackground();
    
    // 检查今日是否已签到
    const lastSignDate = localStorage.getItem('lastSignDate');
    const today = new Date().toDateString();
    
    if (lastSignDate === today) {
      signInBtn.textContent = `今日已签到！(连续签到：${signInCount}天)`;
      signInBtn.classList.add('bg-gray-300');
      signInBtn.classList.remove('bg-primary', 'hover:bg-primary/90');
    }
    
    // 检查用户是否已设置昵称
    const username = localStorage.getItem('username');
    if (!username) {
      const newUsername = prompt('欢迎来到生活盲盒，请输入你的昵称：');
      if (newUsername) {
        localStorage.setItem('username', newUsername);
      }
    }
  </script>
</body>

</html>